<template>
    <div>
        <Button class="ivu-fr ivu-mb-16" type="primary" @click="handleCreate(0)">添加自定义块</Button>
        <h3 class="ivu-mt-8">线索模块</h3>
        <Divider class="ivu-mt-8"></Divider>
        <div id="module">
            <Button class="ivu-fr" size="small" @click="handleAddField(0)">+新增字段</Button>
            <h4 class="ivu-mb">
                营销信息
                <span class="ivu-ml-16">
                    <a @click="handleCreate(1)">编辑</a>
                </span>
                <span class="ivu-ml-16">
                    <a @click="handleDetele()">删除</a>
                </span>
            </h4>
            <div class="ivu-clearfix"></div>
            <Table highlight-row :columns="columns" :data="ListData" border>
                <template slot="show" slot-scope="{row}">
                    <Switch size="small" v-model="row.show" />
                </template>
                <template slot="required" slot-scope="{row}">
                    <Switch size="small" v-model="row.required" />
                </template>
                <template slot="batchEdit" slot-scope="{row}">
                    <Switch size="small" v-model="row.batchEdit" />
                </template>
                <template slot="action" slot-scope="{row}">
                    <a @click="handleAddField(1)">{{row.action[0]}}</a>
                    <Divider type="vertical"></Divider>
                    <a>{{row.action[1]}}</a>
                </template>
            </Table>
        </div>
        <div class="sky-tit">
            <h4 class="ivu-mb">系统标准字段</h4>
            <div class="ivu-clearfix"></div>
        </div>
        <Table highlight-row :columns="columns" :data="ListData" border>
            <template slot="show" slot-scope="{row}">
                <Switch size="small" :disabled="true" v-model="row.show" />
            </template>
            <template slot="required" slot-scope="{row}">
                <Switch size="small" :disabled="true" v-model="row.required" />
            </template>
            <template slot="batchEdit" slot-scope="{row}">
                <Switch size="small" :disabled="true" v-model="row.batchEdit" />
            </template>
            <template slot="action" slot-scope="{row}">
                <a @click="handleAddField(1)">{{row.action[0]}}</a>
            </template>
        </Table>
        <Modal :mask-closable="false" :title="edit ? '新增':'编辑'" @on-ok="handleOk" v-model="editModal" width="500">
            <Form :label-width="80">
                <FormItem label="块名称" required>
                    <Input placeholder="请输入名称" />
                </FormItem>
                <FormItem label="块排序">
                    <InputNumber />
                </FormItem>
            </Form>
        </Modal>
        <Modal :mask-closable="false" width="580" v-model="fieldModal" :title="addEdit? '新增':'编辑'">
            <Form :label-width="100">
                <FormItem label="类型：">
                    <Select v-model="fieldType">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="名称：">
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem label="API名称：">customItem1</FormItem>
                <FormItem label="最大长度">
                    <InputNumber :min="1" :max="300" />
                </FormItem>
                <FormItem label="最小长度：">
                    <InputNumber :min="1" :max="300" />
                </FormItem>
                <FormItem label="默认值：">
                    <Input placeholder="请输入" />
                </FormItem>
            </Form>
            <Form inline :label-width="85">
                <FormItem label="唯一：">
                    <Switch size="small" />
                </FormItem>
                <FormItem label="显示：">
                    <Switch v-model="fieldHide" :before-change="handleBeforeChange" size="small" />
                </FormItem>
                <FormItem v-show="fieldHide === true" label="必填：">
                    <Switch size="small" />
                </FormItem>
                <FormItem v-show="fieldHide === true" label="批量编辑：">
                    <Switch size="small" />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            edit: true,
            fieldModal: false,
            addEdit: true,
            fieldHide: true,
            fieldType: '',
            columns: [
                {
                    title: '字段名',
                    key: 'name',
                    width: 100
                },
                {
                    title: '类型',
                    key: 'type',
                    width: 100
                },
                {
                    title: '显示状态',
                    slot: 'show',
                    width: 100
                },
                {
                    title: '是否必填',
                    slot: 'required'
                },
                {
                    title: '批量编辑',
                    slot: 'batchEdit'
                },
                {
                    title: '默认值',
                    key: 'default'
                },
                {
                    title: '操作',
                    slot: 'action'
                }
            ],
            ListData: [
                {
                    name: '姓名',
                    type: '文字',
                    default: '',
                    show: true,
                    required: true,
                    batchEdit: false,
                    action: ['编辑', '删除']
                },
                {
                    name: '手机号',
                    type: '电话',
                    default: '',
                    show: true,
                    required: true,
                    batchEdit: false,
                    action: ['编辑', '删除']
                },
                {
                    name: '性别',
                    type: '单选',
                    default: '男',
                    show: true,
                    required: true,
                    batchEdit: false,
                    action: ['编辑', '删除']
                }
            ],
            editModal: false,
            drawerField: false,
            indeterminate: true,
            checkAll: false,
            checkAllGroup: ['查看', '新增'],
            modal: false,
            formItem: {
                input: '',
                explain: '',
                switch: true
            },
            formItem1: {
                interset: ''
            },
            columns1: [
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '类型',
                    key: 'type'
                },
                {
                    title: '权限',
                    slot: 'power',
                    width: 180
                }
            ],
            fieldList: [
                {
                    name: '姓名',
                    type: '文本类型',
                    power: ['只读', '读写']
                },
                {
                    name: '手机号',
                    type: '电话类型',
                    power: ['只读', '读写']
                },
                {
                    name: '性别',
                    type: '单选类型',
                    power: ['只读', '读写']
                },
                {
                    name: '病种',
                    type: '关联关系',
                    power: ['只读', '读写']
                },
                {
                    name: '下次回访时间',
                    type: '日期类型',
                    power: ['只读', '读写']
                },
                {
                    name: '下次预约时间',
                    type: '日期类型',
                    power: ['只读', '读写']
                }
            ],
            modularList: [
                {
                    value: '基本信息',
                    label: '基本信息'
                },
                {
                    value: '营销信息',
                    label: '营销信息'
                }
            ],
            typeList: [
                {
                    value: '文本',
                    label: '文本'
                },
                {
                    value: '单选',
                    label: '单选'
                },
                {
                    value: '复选',
                    label: '复选'
                },
                {
                    value: '文本域',
                    label: '文本域'
                },
                {
                    value: '整数',
                    label: '整数'
                },
                {
                    value: '浮点数',
                    label: '浮点数'
                },
                {
                    value: '百分比',
                    label: '百分比'
                },
                {
                    value: '日期',
                    label: '日期'
                }
            ]
        }
    },
    methods: {
        handleAllocation() {
            this.modal = true
        },
        handleDrawerCancel() {
            this.$Message.warning('已取消!')
        },
        handleSubmit() {
            this.$Message.success('操作成功!')
        },
        handleCheckAll() {
            if (this.indeterminate) {
                this.checkAll = false
            } else {
                this.checkAll = !this.checkAll
            }
            this.indeterminate = false

            if (this.checkAll) {
                this.checkAllGroup = ['查看', '新增', '回访', '编辑']
            } else {
                this.checkAllGroup = []
            }
        },
        checkAllGroupChange(data) {
            if (data.length === 4) {
                this.indeterminate = false
                this.checkAll = true
            } else if (data.length > 0) {
                this.indeterminate = true
                this.checkAll = false
            } else {
                this.indeterminate = false
                this.checkAll = false
            }
        },
        handleField() {
            this.drawerField = true
        },
        handleCreate(edit) {
            this.editModal = true
            if (edit === 0) this.edit = true
            else if (edit === 1) this.edit = false
        },
        handleDetele() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否确认删除此模块，删除后不可恢复，请慎重操作',
                onOk: () => {
                    this.$Message.success('删除成功')
                    var module = document.getElementById('module')
                    module.className = 'sky-block'
                }
            })
        },
        handleOk() {
            var module = document.getElementById('module')
            module.className = ''
        },
        handleAddField(state) {
            this.fieldModal = true
            if (state === 0) this.addEdit = true
            else this.addEdit = false
        },
        handleBeforeChange() {
            this.logs(this.fieldHide)
        }
    }
}
</script>
<style scoped>
.sky-color {
    color: #888;
}
.sky-tit {
    margin-top: 32px;
}
.sky-block {
    display: none;
}
</style>